<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
body{
    background:url("img/bg.png") no-repeat;
}
    .entire {
        width: 820px;
        height: 600px;
        /*background-color: #4ABEF2;*/
        margin: 100px auto;

    }

    .title {
        width: 820px;
        height: 100px;
        font-size: 40px;
        text-align: center;
        line-height: 100px;
        color: white;
        font-family: 楷体;
        /*background-color: rgb(56, 181, 149);*/
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

    }

    .registerContent {
        width: 800px;
        height: 470px;
        background-color: #F5F5F5;
        padding: 10px;
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    }


    .register {
        width: 750px;
        height: 50px;
        background-color: #DCDCDC;
        line-height: 50px;
        font-size: 20px;
        box-shadow:0px 0px 10px #000;
        padding-left: 50px;

    }
    img{
        /*margin-right: 10px;*/

    }

    .content {
        width: 800px;
        height: 420px;
        background-color: #EEECED;
        /*background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);*/

    }

    table {
        margin: 0 auto;

    }

    td {
        padding-top: 20px;
    }

    button {
        width: 230px;
        height: 40px;
        border-radius: 15px;
        background-color: #45ADE2;
        color: white;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.8);

    }

    input {
        width: 200px;
        height: 40px;
        border-radius: 15px;
        margin: 10px 0;

        padding-left: 30px;
        border: 1px solid black;
        outline: none;
    }

    .a {
        background: white url(img/user.png) no-repeat 3px;
    }

    .b {
        background: white url(img/password.png) no-repeat 3px;

    }

    .c {
        background: white url(img/password.png) no-repeat 3px;

    }

    .d {
        background: white url(img/email.png) no-repeat 3px;

    }
</style>
<body>
<div class="entire">
    <div class="title">
        <span>网上书城</span>
    </div>
    <div class="registerContent">
        <div class="register">
            <img src="img/plus.png" alt="">
            <span>
                注册新用户
            </span>
        </div>
        <div class="content">
            <form action="">
                <table>
                    <tr>
                        <td>
                            <input type="text" name="name" placeholder="用户名" class="a"/>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="text" name="name" placeholder="密码" class="b"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="name" placeholder="确认密码" class="c"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" name="name" placeholder="电子邮件" class="d"/></td>
                    </tr>
                    <tr>
                        <td>
                            <button>注册新用户</button>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

</div>
</body>
</html>